
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,
		initial-scal=1.0,maximum-scal=2,minium-scal=1,user-scalable=0">
		<title></title>
		<style>
		  body,div,span,img,ul,li,p{
		  	margin: 0;
		  	padding: 0;
		  }
		  @media only screen and (min-width:320px) and (orientation:portrait){  
    html{font-size:50%;}  
}  
@media only screen and (min-width:360px) and (orientation:portrait){  
    html{font-size:62.5%;}  
}  
@media only screen and (min-width:400px) and (orientation:portrait){  
    html{font-size:70%;}  
}  
  
@media only screen and (min-width:600px) and (orientation:portrait){  
    html{font-size:125%;}  
}  
  
@media only screen and (max-width:768px) and (orientation:portrait){  
    .wrap{width:75%;}  
}  
@media only screen and (min-width:480px) and (orientation:landscape){  
    html{font-size:87.5%;}  
}  
@media only screen and (min-width:580px) and (orientation:landscape){  
    html{font-size:125%;}  
}  
@media only screen and (min-width:730px) and (orientation:landscape){  
    html{font-size:130%;}  
}  
@media only screen and (min-width:900px) and (orientation:landscape){  
    html{font-size:175%;}  
}  
@media only screen and (min-width:992px){  
    html{font-size:200%;}  
}  
			html,body{
				font-size: 62.5%;
				width: 100%;
				height: 100%;
			}
			.detailContain{
				width: 90%;
				height: 3rem;
				margin-left: 5%;
				margin-right: 5%;
				position: absolute;
			}
			.detaiTille{
				margin-top: 6%;
				height: 4.5rem;
				position: absolute;
				left: 3%;
				width: 4.5rem;
				border-radius: 100%;
				z-index: 2;
				border: 0.25rem white solid;
			}
			.detaiTille img{
				width: 4.5rem;
				height: 4.5rem;
				vertical-align: middle;
			}
			.detaiName{
				overflow: hidden;
			}
			.detaiName span{
				font-size: 1.7rem;
				position: absolute;
				left: 6.6rem;
				top: 85%;
			}
			.slider{
				width: 100%;
				background-color: #e2e2e2;
				height: 1rem;
			}
			.detailDatu{
				margin-top: 16%;
				position: relative;
				margin-left: 2%;
				margin-right: 2%;
			}
			.detailDatu img{
				width: 100%;
				vertical-align: bottom;
			}
			.mask{
				height: 3.85rem;
				background-color: black;
				opacity: 0.6;
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				line-height: 3.85rem;
			}
			.mask span{
				font-size: 1.54rem;
				color: white;
				display: inline-block;
				padding-left: 1rem;
			}
			.detailList1{
				margin-left: 1.5rem;
				margin-right: 1.5rem;
				height: 8.6rem;
				line-height: 8.6rem;
				 /*white-space:nowrap; 
		      overflow:hidden; 
		      text-overflow:ellipsis;*/
			}
			.detailList1 img{
				width: 6rem;
				height: 6rem;
				vertical-align: middle;
			}
			.detailList1 span{
				font-size: 1.76rem;
		     
		      /*white-space:nowrap; 
		      overflow:hidden; 
		      text-overflow:ellipsis;*/
			}
			.slider2{
				height: 0.2rem;
				background-color: lightgray;
				margin-left: 1.98rem;
				margin-right: 1.98rem;
			}
			.more{
				margin-left: 1.98rem;
				margin-right: 1.98rem;
				height: 5.61rem;
				background-color: #fe776f;
				line-height: 5.61rem;
				text-align: center;
				margin-bottom: 1rem;
			}
			.more span{
				font-size: 1.87rem;
				color: white;
			}
			.videoShow{
				height: 3.96rem;
				line-height: 3.96rem;
				margin-left: 1.98rem;
			}
			.videoShow img{
				height: 1.54rem;
				width: 2.2rem;
				vertical-align: baseline;
			}
			.videoShow span{
				font-size: 1.87rem;
			}
		
		.VS{
			width: 100%;
		}
		.VS ul{
			width: 96%;
			margin-left: 2%;
			margin-right: 2%;
		}
		.VS ul li{
			width: 48%;
			list-style: none;
			  float: left;	
		}
		.VS ul li:nth-child(1){
			margin-right: 4%;
		}
		.videosPaly{
			width: 100%;
			position: relative;
		}
		.videosimg{
			width: 100%;
		}
		.maskplay{
			position: absolute;
			background-color: black;
			text-align: center;
			line-height: 2rem;
			height: 4rem;
			width: 4rem;
			opacity: 0.6;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			border-radius: 100%;
		}
		.maskplay img{
			width: 3rem;
			height: 3rem;
			margin-top:0.5rem ;
			margin-left: 0.5rem;
		}
		.videomask{
			width: 100%;
			height: 2rem;
			background-color: #000000;
			position: absolute;
			bottom: 0;
			right: 0;
			opacity: 0.3;
			line-height: 2rem;
			
		}
		.videomaskTxt{
			width: 100%;
			height: 2rem;
			position: absolute;
			bottom: 0;
			right: 0;
			line-height: 2rem;
			color: white;
		}
		.videomaskTxt span{
			padding-left:6%;
		}
		.videos ul li p{
			font-size: 1.3rem;
			line-height: 1.6rem;
		}
		</style>
	</head>
	<body>
		<div class="detailContent">
			<div class="slider"></div>
		<div class="detailContain">
			<div class="detaiTille">
				<img src="img/shouye/chuanyuehuoxianyuan.png"/>
			</div>
			<div class="detaiName"><span>穿越火线</span></div>
		</div>
		<div class="detailDatu">
			<img src="img/shouye/gongfuxiongmao.png"/>
			<div class="mask"> <span> 6.1版本单排上分最强打野英雄</span></div>
		</div>
		<div class="detailList1">
			<img src="img/shouye/xiaongmao1.png" alt="" />
			<span>《英雄联盟》春节猴哥皮肤礼包</span>
		</div>
	   <div class="slider2"></div> 
	   <div class="detailList1">
			<img src="img/shouye/xiongmao2.png" alt="" />
			<span>《英雄联盟》春节猴哥皮肤礼包</span>
		</div>
	    <div class="more"><span>查看更多</span></div>
		</div>	
		
		<div class="detailContent">
			<div class="slider"></div>
		<div class="detailContain">
			<div class="detaiTille">
				<img src="img/shouye/yingxionglianmeng2.png"/>
			</div>
			<div class="detaiName"><span>英雄联盟</span></div>
		</div>
		<div class="detailDatu">
			<img src="img/shouye/guanyunzhang.png"/>
			<div class="mask"> <span> 6.1版本单排上分最强打野英雄</span></div>
		</div> 
	   <div class="detailList1">
			<img src="img/shouye/xiongmao2.png" alt="" />
			<span>《英雄联盟》春节猴哥皮肤礼包</span>
		</div>
	    <div class="more"><span>查看更多</span></div>
		</div>	
		
		<div class="detailContent">
			<div class="slider"></div>
		<div class="detailContain">
			<div class="detaiTille">
				<img src="img/shouye/menghuanxiyou1.png"/>
			</div>
			<div class="detaiName"><span>英雄联盟</span></div>
		</div>
		<div class="detailDatu">
			<img src="img/shouye/menghuanxiyou2.png"/>
			<div class="mask"> <span> 6.1版本单排上分最强打野英雄</span></div>
		</div>
		<div class="detailList1">
			<img src="img/shouye/xiaongmao1.png" alt="" />
			<span>《英雄联盟》春节猴哥皮肤礼包</span>
		</div>
	   <div class="slider2"></div> 
	   <div class="detailList1">
			<img src="img/shouye/xiongmao2.png" alt="" />
			<span>《英雄联盟》春节猴哥皮肤礼包</span>
		</div>
	    <div class="more"><span>查看更多</span></div>
		</div>	
		
		<div class="VS">
			<div class="videoShow">
			<img src="img/shouye/playauto.jpg"/>
			<span>视频秀</span>
		</div>
		<div class="videos">
			<ul>
				<li>
<div class="videosPaly">
	<img src="img/shouye/shipinxiu1.png" alt=""  class="videosimg" />
    <div class="maskplay"><img src="img/shouye/play.png"/></div>
    <div class="videomask"></div>
   <div class="videomaskTxt"><span>英雄联盟</span></div>
</div>
 <p>6.1版本上分最强打野位置英雄tops5排行</p> 
<div class="videosPaly">
	<img src="img/shouye/shipinxiu1.png" alt=""  class="videosimg" />
    <div class="maskplay"><img src="img/shouye/play.png"/></div>
    <div class="videomask"></div>
     <div class="videomaskTxt"><span>英雄联盟</span></div>
</div>
<p>6.1版本上分最强打野位置英雄tops5排行</p> 

				</li>
				<li>
<div class="videosPaly">
	<img src="img/shouye/shipinxiu1.png" alt=""  class="videosimg" />
    <div class="maskplay"><img src="img/shouye/play.png"/></div>
    <div class="videomask"></div> 
     <div class="videomaskTxt"><span>英雄联盟</span></div>
</div>
 <p>6.1版本上分最强打野位置英雄tops5排行</p> 
<div class="videosPaly">
	<img src="img/shouye/shipinxiu1.png" alt=""  class="videosimg" />
    <div class="maskplay"><img src="img/shouye/play.png"/></div>
    <div class="videomask"></div> 
     <div class="videomaskTxt"><span>英雄联盟</span></div>
</div>
<p>6.1版本上分最强打野位置英雄tops5排行</p>
			</ul>
		</div>
		</div>
		<div class="more"><span>查看更多</span></div>
	</body>
</html>
